<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <title>用户注册 - 淘乐乐商城</title>
    <style>
        .register-container {
            max-width: 400px;
            margin: 40px auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .register-title {
            text-align: center;
            font-size: 24px;
            color: #333;
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }
        
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-group input:focus {
            border-color: #ff4d4f;
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
        }
        
        .register-btn {
            width: 100%;
            padding: 12px;
            background: #ff4d4f;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .register-btn:hover {
            background: #ff6b6b;
        }
        
        .login-link {
            text-align: center;
            margin-top: 20px;
            color: #666;
        }
        
        .login-link a {
            color: #ff4d4f;
            text-decoration: none;
        }
        
        .login-link a:hover {
            text-decoration: underline;
        }
        
        .error-message {
            color: #ff4d4f;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        
        .password-strength {
            margin-top: 5px;
            font-size: 12px;
        }
        
        .strength-weak {
            color: #ff4d4f;
        }
        
        .strength-medium {
            color: #faad14;
        }
        
        .strength-strong {
            color: #52c41a;
        }
    </style>
</head>
<body>
    <%@ include file="header.jsp" %>
    
    <div class="register-container">
        <h2 class="register-title">用户注册</h2>
        
        <form id="registerForm" onsubmit="return validateForm()">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required 
                       onblur="checkUsername(this.value)">
                <div id="usernameError" class="error-message"></div>
            </div>
            
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required 
                       onkeyup="checkPasswordStrength(this.value)">
                <div id="passwordStrength" class="password-strength"></div>
            </div>
            
            <div class="form-group">
                <label for="confirmPassword">确认密码</label>
                <input type="password" id="confirmPassword" name="confirmPassword" required>
                <div id="confirmPasswordError" class="error-message"></div>
            </div>
            
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" name="email" required>
                <div id="emailError" class="error-message"></div>
            </div>
            
            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" name="phone" required 
                       pattern="[0-9]{11}" title="请输入11位手机号码">
                <div id="phoneError" class="error-message"></div>
            </div>
            
            <button type="submit" class="register-btn">注册</button>
        </form>
        
        <div class="login-link">
            已有账号？<a href="login.jsp">立即登录</a>
        </div>
    </div>
    
    <script>
        function checkUsername(username) {
            if (username.length < 3) {
                showError('usernameError', '用户名至少需要3个字符');
                return false;
            }
            
            // 检查用户名是否已存在
            fetch('register/checkUsername?username=' + encodeURIComponent(username))
                .then(response => response.json())
                .then(data => {
                    if (!data.available) {
                        showError('usernameError', '该用户名已被使用');
                    } else {
                        hideError('usernameError');
                    }
                });
        }
        
        function checkPasswordStrength(password) {
            const strengthDiv = document.getElementById('passwordStrength');
            if (password.length === 0) {
                strengthDiv.innerHTML = '';
                return;
            }
            
            let strength = 0;
            if (password.length >= 8) strength++;
            if (password.match(/[a-z]/)) strength++;
            if (password.match(/[A-Z]/)) strength++;
            if (password.match(/[0-9]/)) strength++;
            if (password.match(/[^a-zA-Z0-9]/)) strength++;
            
            switch(strength) {
                case 0:
                case 1:
                    strengthDiv.innerHTML = '<span class="strength-weak">弱</span>';
                    break;
                case 2:
                case 3:
                    strengthDiv.innerHTML = '<span class="strength-medium">中</span>';
                    break;
                case 4:
                case 5:
                    strengthDiv.innerHTML = '<span class="strength-strong">强</span>';
                    break;
            }
        }
        
        function validateForm() {
            let isValid = true;
            
            // 验证密码
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            if (password !== confirmPassword) {
                showError('confirmPasswordError', '两次输入的密码不一致');
                isValid = false;
            } else {
                hideError('confirmPasswordError');
            }
            
            // 验证邮箱格式
            const email = document.getElementById('email').value;
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                showError('emailError', '请输入有效的邮箱地址');
                isValid = false;
            } else {
                hideError('emailError');
            }
            
            // 验证手机号
            const phone = document.getElementById('phone').value;
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                showError('phoneError', '请输入有效的手机号码');
                isValid = false;
            } else {
                hideError('phoneError');
            }
            
            if (isValid) {
                // 提交注册表单
                const formData = {
                    username: document.getElementById('username').value,
                    password: document.getElementById('password').value,
                    email: document.getElementById('email').value,
                    phone: document.getElementById('phone').value
                };
                
                fetch('register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: new URLSearchParams(formData).toString()
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('注册成功！');
                        window.location.href = 'login.jsp';
                    } else {
                        alert(data.message || '注册失败，请重试');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('注册失败，请重试');
                });
            }
            
            return false; // 阻止表单默认提交
        }
        
        function showError(elementId, message) {
            const errorDiv = document.getElementById(elementId);
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
        }
        
        function hideError(elementId) {
            const errorDiv = document.getElementById(elementId);
            errorDiv.style.display = 'none';
        }
    </script>
    
    <%@ include file="footer.jsp" %>
</body>
</html> 